<template>
  <div class="container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center courseList">
        <div class="main-left2" style="height: calc(100vh - 82px);">
          <div class="con2">
            <div style="float: left;margin-top: 13px;display:flex;algin-items:center;">
              <p style="line-height:24px;">
                共搜索出“{{seachContentLabel}}”{{total}}个结果
              </p>
              <div class="seach_tag_box">
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.kind_item_name"
                  @close="openDetils({},{class_kind_item_id: undefined},{kind_item_name:undefined})">
                  <span>{{queryParamsLabel.kind_item_name}}</span>
                </el-tag>
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.kind_name"
                  @close="openDetils({},{class_kind_id: undefined},{kind_name:undefined})">
                  <span>{{queryParamsLabel.kind_name}}</span>
                </el-tag>
                <el-tag size="small" type="info" closable class="seach_tag" v-if="queryParamsLabel.ext_name"
                  @close="openDetils({},{ext_name: undefined},{ext_name:undefined})">
                  <span>{{queryParamsLabel.ext_name}}</span>
                </el-tag>
              </div>
            </div>
            <div style="float: right;position: relative;">
              <el-button class="seach_btn" @click="search()"><span class="search">搜索</span></el-button>
            </div>
            <div class="seach_box" style="float: right;">
              <el-input placeholder="请输入内容" v-model="seachContent" @keyup.enter.native="search()">
              </el-input>
            </div>

            <div class="table_style" v-if="tableData.length > 0" @mousewheel="scroll">
              <el-table row-key="id" :header-cell-style="{ background: '#EEEEEE', color: '#222222',fontSize:'16px' }"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" :data="tableData"
                style="width:1220px;" height='calc(100vh - 180px)'>
                <el-table-column prop="resources_name" label="资源名称" width="500">
                  <template slot-scope="scope">
                    <span class="collection_style" @click="openDialog(scope.row)">{{scope.row.resources_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="kind_item_name" align="center" label="资源合集">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="openDetils(scope.row,{class_kind_item_id: scope.row.kinditem.kind_item_id},{kind_item_name:scope.row.kinditem.kind_item_name})">{{scope.row.kinditem.kind_item_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="kind_name" align="center" label="资源分类">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="openDetils(scope.row,{class_kind_id: scope.row.kind_item_id_class},{kind_name:scope.row.kind_name})">{{scope.row.kind_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column prop="ext_name" align="center" label="资源类型">
                  <template slot-scope="scope">
                    <span class="row_font_style"
                      @click="openDetils(scope.row,{ext_name: scope.row.ext_name},{ext_name:scope.row.ext_name})">{{scope.row.ext_name}}</span>
                  </template>
                </el-table-column>

                <el-table-column align="center" label="操作">
                  <template slot-scope="scope">
                    <span class="collection_style" @mouseout="changeText($event,'加入收藏')"
                      @mouseover="changeText($event,'加入收藏')" @click="handleClick(scope.row.id, scope.row)"
                      v-if="scope.row.collection == 0 && !scope.row.children">加入收藏</span>
                    <span class="collection_style" @mouseover="changeText($event,'取消收藏')"
                      @mouseout="changeText($event,'已收藏')" @click="handleClick(scope.row.id, scope.row)"
                      v-else>已收藏</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <el-empty :image-size="200" v-else></el-empty>
          </div>
        </div>
        <div class="main-right2">
          <div class="con-menu2" @click="goBack()">
            <div class="menu-img"><img src="static/img/r-back.png" alt="" /></div>
            <div class="menu-item">返回</div>
          </div>
        </div>
      </div>
    </div>
    <div class="video-play-dig" v-if="isOpen6 == true" style="position: absolute; z-index: 3;">
      <div class="title">
        <span class="text-hide"
          style="max-width:230px;display: inline-block;line-height: 70px;float: left;">{{ resources_name }}</span>
        <label class="mr20 " style="font-size: 14px;">分类：{{kind_name}}--{{kind_item_name}}</label>

        <label class="viewnum2 mr20 " style="margin-left: 370px;">{{ shownum }}</label>
        <label class="collectnum2 mr20 ">{{ collectionnum }}</label>
        <label v-if="kind_collection > 0" :class="[ 'mr20', 'italic', kind_collection > 0 ? 'cur' : '']"
          style="cursor: pointer;font-size: 12px;" @mouseover="changeText($event,'取消收藏')"
          @mouseout="changeText($event,'已收藏')" @click="collectLi(index, kind_id)">
          已收藏
        </label>
        <label v-else :class="[ 'mr20', 'italic', kind_collection > 0 ? 'cur' : '']" @click="collectLi(index, kind_id)"
          style="cursor: pointer;font-size: 12px;" @mouseout="changeText($event,'收藏')"
          @mouseover="changeText($event,'收藏')">
          收藏
        </label>
        <span class="closed" @click="getClose()"><img src="static/img/close.png" /></span>
      </div>
      <div class="cont">
        <div class="mleft" style="display: flex;">
          <div class="play_area" style="height: 720px;">
            <!-- 视频音频 -->
            <div id="course-player" v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-if="getFileType(currentZiyuan.file) == 'video'" style="color: #00FFFF;"></div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'html'">
              <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" style="height:720px;">
              <iframe style="width: 100%;height: 100%;" class="addPad" :src="currentZiyuan.file"></iframe>
              </div>
            </template>
            <template v-else-if="getFileType(currentZiyuan.file) == 'radio'">
              <!--  -->
              <div class="item-courseRadio item-play" :style="{ 'background-image': 'url(' + bgImg + ')' }">
                <img v-if="showImg" :class="isPlayMusic ? activeClass : errorClass" src="../../../static/img/music1.png"
                  style="width: 372px;min-height: 372px;" />
                <div class="raad-box" v-else>
                  <div class="item-read" :class="{'no_mask':currentZiyuan.is_mask!=1}">
                    <div v-for="(item, index) in read" :key="index" class="item-all">
                      <span v-if="index < read.length">
                        <span
                          :class="[getCurrent(item,index) ? 'item-color' : '']">{{ item.text }}</span>
                      </span>
                    </div>
                  </div>
                </div>
                <audio @ended="stopMusic()" @pause="stopMusic()" @play="playMusic()" id="audio" class="item-changeAudio"
                  @timeupdate="update" :src="music" controls="controls" controlsList="nodownload">
                  Your browser does not support the audio element.
                </audio>
              </div>

            </template>
            <!-- office文件 -->
            <div v-loading="isIframeLoad" element-loading-text="资源加载中..." element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0.8)" v-else-if="
              getFileType(currentZiyuan.file) == 'excel' ||
                getFileType(currentZiyuan.file) == 'word' ||
                getFileType(currentZiyuan.file) == 'pdf' ||
                getFileType(currentZiyuan.file) == 'ppt'
            " style="height:720px;">
            <iframe style="background-color: #FFFFFF;" class="course-iframe"
              :src="'https://ow365.cn/?i=28004&ssl=1&n=5&furl=' + currentZiyuan.file" @loadstart="isIframeLoad=true" @load="isIframeLoad = false"></iframe>
            </div>
            <!-- 图片 -->
            <div v-else-if="getFileType(currentZiyuan.file) == 'image'">
              <el-carousel indicator-position="outside" :interval="100000" style="height: 720px;"
                v-if="currentZiyuan.file.split(';').length > 1">
                <el-carousel-item v-for="(item, index) in currentZiyuan.file.split(';')" :key="index"><img
                    :src="item" />
                </el-carousel-item>
              </el-carousel>

              <img :src="currentZiyuan.file" v-if="currentZiyuan.file.split(';').length == 1" />
            </div>
            <template v-else-if="getFileType(currentZiyuan.file) == 'swf'">
              <object :data="currentZiyuan.file" type="application/x-shockwave-flash"
                style="width:970px;height:60%;position: fixed;top: 50%;left: 50%;transform: translate(-60%,-45%);">
                <param name="movie" value="demo.swf" />
                <embed :src="currentZiyuan.file" />
              </object>
            </template>
          </div>
        </div>

        <div class="mright" style="overflow-x: scroll;">
          <el-tree ref="tree" :data="itemData" node-key="id" @node-click="handleNodeClick"
            :default-expanded-keys="defaultExpandedKeys">
            <span slot-scope="{ node, data } " style="position: relative; width: 100%; height: 100%;">
              <span class="el_tree_item_name" style="position: absolute;top: 30%;">{{ data.resources_name }}</span>
              <label :class="['  fr', 'ico-' + getFileType(data.file)]"
                style="position: absolute; right: 0; top: 30%;">&nbsp;</label>
            </span>
          </el-tree>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '../../components/header.vue';
  export default {
    name: "search_content",
    components: {
      Header
    },
    data() {
      return {
        isIframeLoad:true,
        tableData: [],
        currentTxt: 0, //当前歌词所在位置
        kind_item_name: '',
        resources_name: '',
        shownum: 0,
        isPlayMusic: false,
        isOpen6: false,
        collectionnum: 0,
        kind_collection: '',
        array: [], //全部歌词
        indexArray: 0, //监听高亮歌词显示
        read: [], //截取的要显示的歌词
        index: 0,
        itemData: [], //截取的要显示的歌词
        seachContent: '',
        seachContentLabel: '',
        currentZiyuan: {},
        total: 0,
        page: 1,
        class_kind_item_id: '',
        ext_name: '',
        kind_name: '',
        watch_length: 1,
        flag: 0, //防止定时器多次执行
        showImg: true, //没有歌词显示转动图片，
        bgTimer: '',
        totalpages: '',
        bgAllImg: ['../../../static/img/music-bg.jpg'], //当前播放歌曲轮播的背景图片
        bgImg: '../../../static/img/music-bg.jpg', //轮播背景图
        queryParams: {},
        showChildrenIndex: -1,
        defaultExpandedKeys: [],
        player: null,
        parentNode: null,
        chekcParentIndex: -1,
        checkNodeIndex: -1,
        queryParamsLabel: {
          ext_name: '',
          kind_name: '',
          kind_item_name: ''
        }
      }
    },
    beforeDestroy() {
      clearInterval(this.bgTimer); //销毁定时器
      this.bgTimer = null;
    },
    methods: {
      getCurrent(item, index) {
        if (index < this.read.length-1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt < this.read[index + 1].time)
        } else if (index == this.read.length-1) {
          return (this.currentTxt > this.read[index].time - 1 && this.currentTxt == this.read[index].time)
        }else{
          return this.currentTxt > this.read[index].time - 1
        }
      },
      changeText(event, text) {
        let el = event.currentTarget
        el.innerHTML = text
      },
      goBack() {
        this.$router.go(-1);
      },
      stopMusic() {
        this.isPlayMusic = false;
      },
      playMusic() {
        this.isPlayMusic = true;
      },
      playLi(i, item) {
        //console.log('item ', item)
        var audio = document.querySelector('audio');
        if (audio != null) {
          audio.currentTime = 0;
        }
        this.shownum = item.shownum;
        this.collectionnum = item.collectionnum;
        this.kind_collection = item.collection;
        this.indexArray = 0;
        this.currentTxt = 0;
        this.zy_id = item.id;
        this.currentZiyuan = item;
        this.isPlayMusic = false;
        clearInterval(this.bgTimer);
        this.bgTimer = null
        this.flag = 0;
        this.imgNum = 1
        if (this.player) {
          this.player.dispose();
          this.player = null
        }
        if (this.getFileType(this.currentZiyuan.file) == 'video') {
          this.aliplay(this.currentZiyuan.file);
        } else if (this.getFileType(this.currentZiyuan.file) == 'radio') {
          this.music = this.currentZiyuan.file;
        }
        //是否有歌词，有歌词进行处理
        if (item.lyric_text != '') {
          this.array = [];
          this.showImg = false;
          let lyricArr = item.lyric_text.split('[').slice(1); // 先以[进行分割
          let lrcObj = {};
          lyricArr.forEach(item => {
            var data = {};
            let arr = item.split(']'); // 再分割右括号
            // 时间换算成秒
            let m = parseInt(arr[0].split(':')[0]);
            let s = parseInt(arr[0].split(':')[1]);
            arr[0] = m * 60 + s;
            data.time = arr[0];
            if (arr[1] != '\n') {
              // 去除歌词中的换行符
              lrcObj[arr[0]] = arr[1];
              data.text = arr[1];
            }
            this.array.push(data);
          });
          this.read = this.array.slice(0, this.indexArray + 10);
          // //console.log(this.read);
        } else {
          this.showImg = true;
        }
        if (item.rotation_img_text != '') {
          //console.log(item.rotation_img_text);
          this.bgAllImg = item.rotation_img_text;
          this.bgImg = this.bgAllImg[0];
          this.showImg = false;
        } else {
          this.bgImg = '../../../static/img/music-bg.jpg';
          this.bgAllImg = [];
          clearInterval(this.bgTimer);
          this.flag = 0;
        }
        if (this.flag == 1) {
          return;
        }
        if (this.bgAllImg.length > 1) {
          this.bgTimer = setInterval(() => {
            this.flag = 1;
            //console.log(this.imgNum);
            this.bgImg = this.bgAllImg[this.imgNum];
            if (this.imgNum == this.bgAllImg.length - 1) {
              this.imgNum = -1;
            }
            this.imgNum++;
          }, 10000);
        } else {
          clearInterval(this.bgTimer);
        }
      }, // 阿里云视频播放
      getClose() {
        this.isOpen6 = false;
        clearInterval(this.bgTimer);
        this.bgTimer = null
        this.flag = 0;
        this.itemData = [];
      },
      aliplay(file) {
        this.isIframeLoad = true
        let that = this
        if (this.player) {
          this.player.dispose();
        }
        const saveTime = function (memoryVideo, currentTime) {
          localStorage.setItem(memoryVideo, currentTime);
        };

        const getTime = function (memoryVideo) {
          return localStorage.getItem(memoryVideo);
        };
        this.$nextTick(() => {
          this.player = new Aliplayer({
              id: 'course-player',
              source: file,
              width: '100%',
              height: '720px',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'MemoryPlayComponent',
                type: AliPlayerComponent.MemoryPlayComponent,
                args: [false, getTime, saveTime]
              }],
              skinLayout: [{
                  name: 'controlBar',
                  align: 'blabs',
                  x: 0,
                  y: 0,
                  children: [{
                    name: 'progress',
                    align: 'blabs',
                    x: 0,
                    y: 44
                  },
                  {
                    name: 'playButton',
                    align: 'tl',
                    x: 15,
                    y: 12
                  },
                  {
                    name: 'timeDisplay',
                    align: 'tl',
                    x: 10,
                    y: 7
                  },
                  {
                    name: 'fullScreenButton',
                    align: 'tr',
                    x: 10,
                    y: 12
                  },
                  {
                    name: 'volume',
                    align: 'tr',
                    x: 5,
                    y: 10
                  }
                  ]
                }]
            },
            function (player) {

            }
          );
          this.player.on('ready',()=>{
            this.isIframeLoad = false
          })
          this.player.on('ended', () => {
            if (that.chekcParentIndex != -1 && (that.checkNodeIndex < that.itemData[that.chekcParentIndex]
                .children.length - 1)) {
              if (that.getFileType(that.itemData[that.chekcParentIndex].children[that.checkNodeIndex + 1]
                  .file) == 'video') {
                // 播放下一个
                that.aliplay(that.itemData[that.chekcParentIndex].children[that.checkNodeIndex + 1]
                  .file)
                this.checkNodeIndex++
                this.$refs.tree.setCurrentKey(that.itemData[that.chekcParentIndex].children[that.checkNodeIndex]
                  .id)
              }
            }
          })
        });

      },
      handleNodeClick(item, node, el) {
        this.parentNode = node.parent
        if (node.level == 2) {
          let firstNodes = this.parentNode.parent.childNodes
          firstNodes.forEach((element, index) => {
            if (this.parentNode.id == element.id) {
              this.chekcParentIndex = index
            }
          });
          this.parentNode.childNodes.forEach((element, index) => {
            if (element.id == node.id) {
              this.checkNodeIndex = index
            }
          });
        } else {
          this.chekcParentIndex = -1
          this.checkNodeIndex = -1
        }
        this.resources_name = item.resources_name
        // this.kind_name = item.ext_name;
        this.playLi(0, item);
      },
      update() {
        var audio = document.querySelector('audio');
        if (audio != null) {
          this.currentTxt = parseInt(audio.currentTime);
          this.array.forEach((element, index) => {
            if (index < this.array.length - 1) {
              if (this.currentTxt > this.array[index].time - 1 && this.currentTxt < this.array[index + 1].time) {
                this.indexArray = index
              }
            }
          });
          if (this.indexArray > 6) {
            this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
          } else {
            this.read = this.array.slice(0, this.indexArray + 13)
          }
        }
      },
      collectLi(index, id) {
        if (this.kind_collection === 0) {
          this.kind_collection = 1;
          this.collectionnum = 1
        } else {
          this.kind_collection = 0;
          this.collectionnum = 0;
        }
        this.$api('ziyuan.addCollection', {
          id: id
        }).then(res => {
          this.$message.success(res.msg);
        });
      },
      //获取文件类型
      getFileType(fileName) {
        // 后缀获取
        let suffix = '';
        // 获取类型结果
        let result = '';
        try {
          const flieArr = fileName.split('.');
          suffix = flieArr[flieArr.length - 1];
        } catch (err) {
          suffix = '';
        }
        // fileName无后缀返回 false
        if (!suffix) {
          return false;
        }
        suffix = suffix.toLocaleLowerCase();
        // 图片格式
        const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif'];
        // 进行图片匹配
        result = imglist.find(item => item === suffix);
        if (result) {
          return 'image';
        }
        // 匹配txt
        const txtlist = ['txt'];
        result = txtlist.find(item => item === suffix);
        if (result) {
          return 'txt';
        }
        // 匹配 excel
        const excelist = ['xls', 'xlsx'];
        result = excelist.find(item => item === suffix);
        if (result) {
          return 'excel';
        }
        // 匹配 word
        const wordlist = ['doc', 'docx'];
        result = wordlist.find(item => item === suffix);
        if (result) {
          return 'word';
        }
        // 匹配 pdf
        const pdflist = ['pdf'];
        result = pdflist.find(item => item === suffix);
        if (result) {
          return 'pdf';
        }
        // 匹配 ppt
        const pptlist = ['ppt', 'pptx'];
        result = pptlist.find(item => item === suffix);
        if (result) {
          return 'ppt';
        }
        // 匹配 视频
        const videolist = [
          '3gp',
          'asf',
          'avi',
          'dat',
          'dv',
          'flv',
          'f4v',
          'gif',
          'm2t',
          'm3u8',
          'm4v',
          'mj2',
          'mjepg',
          'mkv',
          'mov',
          'mp4',
          'mpe',
          'mpg',
          'mpeg',
          'mts',
          'ogg',
          'qt',
          'rm',
          'rmab',
          'ts',
          'vob',
          'wmv',
          'webm'
        ];
        result = videolist.find(item => item === suffix);
        if (result) {
          return 'video';
        }
        // 匹配 音频
        const radiolist = ['aac', 'ac3', 'acm', 'amr', 'ape', 'caf', 'flac', 'm4a', 'mp3', 'ra', 'wav', 'wma'];
        result = radiolist.find(item => item === suffix);
        if (result) {
          return 'radio';
        }
        // 匹配 swf
        const swflist = ['swf'];
        result = swflist.find(item => item === suffix);
        if (result) {
          return 'swf';
        }
        //匹配html
        const htmllist = ['html'];
        result = htmllist.find(item => item === suffix);
        if (result) {
          return 'html';
        }
        // 其他 文件类型
        return 'other';
      },
      search() {
        //console.log('aaaaa')
        this.queryParams = {}
        this.queryParamsLabel = {
          ext_name: '',
          kind_name: '',
          kind_item_name: ''
        }
        this.$api('ziyuan.getKeywordZiyuanList', {
          keyword: this.seachContent,
          token: localStorage.getItem('token')
        }).then(res => {
          this.seachContentLabel = this.seachContent
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.totalpages = res.data.last_page;
        });
      },
      handleClick(id, item) {
        this.isOpen6 = false;
        if (item.collection === 0) {
          item.collection = 1
        } else {
          item.collection = 0;
        }
        this.$api('ziyuan.addCollection', {
          id: id,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.message)
            if (item.collection === 0) {
              item.collection = 1
            } else {
              item.collection = 0;
            }
          }
        });
      },
      watch_length_fun() {
        const _this = this;
        if (this.page < this.totalpages) {
          let all_form = {
            page: this.page + 1,
            keyword: this.$route.query.keyword,
            token: localStorage.getItem('token'),
          }
          this.page = this.page + 1
          all_form = Object.assign(all_form, this.queryParams)
          this.$api('ziyuan.getKeywordZiyuanList', all_form).then(res => {
            _this.tableData = _this.tableData.concat(res.data.data);
            _this.total = res.data.total;
            _this.totalpages = res.data.last_page;
          });
        }
      },
      //滚动加载
      scroll() {
        const that = this;
        setTimeout(that.watch_length_fun, 500)
      },
      //打开弹窗
      openDialog(item) {
        //console.log('item2', item)
        this.isIframeLoad=true
        const that = this;
        let formData = {
          token: localStorage.getItem('token'),
          id: item.id
        };
        this.$api('ziyuan.setCount', formData);
        this.$api('ziyuan.getZiyuanInfo', {
          id: item.id,
          token: localStorage.getItem('token')
        }).then(res => {
          let item = res.data;
          this.collectionnum = item.collectionnum;
          this.shownum = item.shownum;
          that.itemData.push({
            collection: item.collection,
            collectionnum: item.collectionnum,
            ext_name: item.ext_name,
            file: item.file,
            image: item.image,
            lyric_text: item.lyric_text,
            lyric: item.lyric,
            shownum: item.shownum,
            rotation_times: item.rotation_times,
            resources_name: item.resources_name,
            desc: item.desc,
            download_num: item.download_num,
            id: item.id,
            res_type: item.res_type,
            kind_item_id_class: item.kind_item_id_class,
            kind_item_id_course: item.kind_item_id_course,
            rotation_img: item.rotation_img,
            rotation_img_text: item.rotation_img_text,
            status: item.status,
            weigh: item.weigh
          });
          this.$nextTick(() => {
            //console.log(item.id)
            this.$refs.tree.setCurrentKey(item.id)
          })
        });
        this.kind_item_name = item.kind_name;
        this.resources_name = item.resources_name
        this.kind_name = item.kinditem.kind_item_name
        this.kind_id = item.id;
        this.isOpen6 = true;
        this.chekcParentIndex = -1
        this.checkNodeIndex = -1
        that.playLi(0, item);

      },
      //搜索
      openDetils(item, query = {}, queryLabel = {}) {
        // this.class_kind_item_id = item.kinditem.kind_item_id;
        // this.ext_name = item.ext_name;
        // this.kind_name = item.kind_name;
        this.page = 1;
        this.tableData = [];
        this.watch_length = 1;
        this.queryParams = Object.assign(this.queryParams, query)
        this.queryParamsLabel = Object.assign(this.queryParamsLabel, queryLabel)
        let all_form = {
          keyword: this.$route.query.keyword,
          token: localStorage.getItem('token'),
        }
        all_form = Object.assign(all_form, this.queryParams)
        this.$api('ziyuan.getKeywordZiyuanList', all_form).then(res => {
          this.tableData = res.data.data;
          this.total = res.data.total;
          this.totalpages = res.data.last_page;
        });
      },
    },
    mounted() {
      this.seachContent = this.$route.query.keyword
      this.search();
    },
    watch: {
      //监听时间变化
      currentTxt(newv) {
        // if (newv > 1) {
        //   var ret = this.array.findIndex((value, index, arr) => {
        //     return value.time == newv;
        //   });
        //   if (ret != -1) {
        //     this.indexArray = ret;
        //   }
        // }
        // if (this.indexArray > 6) {
        //   this.read = this.array.slice(this.indexArray - 5, this.indexArray + 13);
        // }
      }
    },
  }

</script>

<style scoped>
  .seach_btn {
    height: 40px;
    width: 45px;
    background: #55E4C2;
    border: 1px solid #55E4C2;
    opacity: 1;
    border-radius: 0 6px 6px 0px;
    line-height: 23px;
  }

  .search {
    position: absolute;
    left: 25%;
    bottom: 25%;
  }

  .row_font_style {
    width: 48px;
    height: 22px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #3688E9;
    opacity: 1;
    cursor: pointer;
  }

  .table_style {
    float: left;
    margin-left: -50px;
    margin-top: 10px;
    padding-bottom: 15px;
    /* height: calc(100vh - 240px);
    overflow-y: scroll; */
  }

  /* 定义滚动条样式 */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  .seach_box /deep/ .el-input__inner {
    border-radius: 4px 0px 0px 4px;
  }

  is-leaf el-table__cell {
    text-align: center;
  }

  .el-tree /deep/ .el-tree-node .el-tree-node__content {
    height: 43px;
    margin: 1px 0;
  }

  .el-tree /deep/ .is-current>.el-tree-node__content {
    background: #C9FFEF !important;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__label {
    display: inline-block;
    width: 72%;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    width: 200px;
    height: 34px;
    font-size: 16px;
    font-family: PingFang SC;
    line-height: 0px;
  }

  .el-tree /deep/ .el-tree-node__children .is-current .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    line-height: 0px;
    color: #222222;
  }

  .el-tree /deep/ .el-tree-node__children .el-tree-node__content {
    font-size: 16px;
    font-family: PingFang SC;
    line-height: 0px;
  }

  .el-tree /deep/ .el_tree_item_name {
    width: 160px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

  }

  .el-tree /deep/ .is-current .el_tree_item_name {
    padding-top: 10px;
  }

  .el-tree /deep/ .el-tree-node__children .el_tree_item_name {
    width: 120px;
    height: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 8px;

  }

  .seach_tag_box {
    display: flex;
    align-items: center;
  }

  .seach_tag {
    margin-left: 12px;
    display: flex;
    align-items: center;

  }

  .seach_tag>span {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
  }

  .seach_tag /deep/ .el-tag__close {
    margin-top: 4px;
  }


  .table_style /deep/ .el-table__body-wrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: rgba(240, 240, 240, 0);
    opacity: 0;
  }

  .table_style /deep/ .el-table__body-wrapper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
  }

  .table_style /deep/ .el-table__body-wrapper::-webkit-scrollbar-track {
    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);
    border-radius: 10px;
  }

  .table_style /deep/ .el-table--border:after,
  .el-table--group:after,
  .el-table:before {
    background-color: rgba(66, 55, 55, 0);
  }

  .item-courseRadio .item-read {
    position: inherit;
    height: 85%;
    padding-bottom: 3%;
    width: 70%;
    border-radius: 12px;
    padding-top: 0;
  }
  .item-all {
    padding: 15px;
    font-size: 18px;
  }

  .item-color {
    color: #fff;
    font-size: 26px;
  }

</style>
